<template>
  <div class="article-detail-box">
    <div class="row">
      <div class="leftcolumn">
        <div class="article-header-box">
          <section>
            <h1 class="article-title">
              {{ articDetail.title }}
            </h1>
            <div class="info-box">
              <div class="bar-content">
                <!-- <span class="original">原创</span>
                <span class="light">ambition</span> -->
                <span><font
                  style="font-family: 'times new Roman', Georgia, Serif"
                >T&nbsp;</font>
                  共{{ deleteHTMLTag(articDetail.content).length }}字，须阅读{{
                    Math.round(wordNum / 400)
                  }}分钟 </span><span>|</span>

                <span><i> <a-icon type="clock-circle" /></i>{{ articDetail.createTime }}</span>
                <span>|</span>
                <span>
                  <i> <a-icon type="eye" /> </i>{{ articDetail.viewCount }}次阅读
                </span>
              </div>
            </div>

            <div class="article-cover">
              <img :src="articDetail.cover">
            </div>
          </section>
        </div>
        <!-- 文章详情 -->
        <div class="article-info-body">
          <div v-if="isArticleProcessing" class="loadding-box">
            <a-skeleton active />
          </div>
          <div v-show="!isArticleProcessing" class="mavonEditor">
            <div id="article-content-category-box" class="cata-log-box" />
            <article
              id="markdown-body-box"
              v-viewer
              v-highlight
              class="markdown-body-box"
              v-html="articDetail.content"
            />
            <!-- <div v-if="articDetail.labels" class="tags-item-box">
              <span class="label">博客标签：</span>
              <router-link
                v-for="(item, ins) in articDetail.labels.split(',')"
                :key="ins"
                to=""
                class="tag-link"
              >
                {{ item }}
              </router-link>
            </div> -->
          </div>
          <!--  本文已获作者授权转载，原文来自:
              <span class="label">
                <a :href="articDetail.reprintSource" target="_blank">{{ articDetail.reprintSource }}
                </a>
              </span> -->
          <div v-show="!isArticleProcessing" class="play-tour-box">
            <!-- 转载声明 -->
            <div v-if="articDetail.writeType ==2" class="right-show-text">
              <span class="icon-warning-outline">
                <a-icon type="exclamation-circle" />
              </span>
              本文已获作者授权转载，原文来自:
              <a
                :href="articDetail.reprintSource"
                target="_blank"
                rel="noopener"
              >
                {{ articDetail.reprintSource }}
              </a>
            </div>
            <div v-else class="right-show-text">
              <span class="icon-warning-outline">
                <a-icon type="exclamation-circle" />
              </span>
              本文由
              <span class="article-user-info">{{
                articDetail.user.userName
              }}</span>
              原创发布 ，遵循
              <a
                href="http://creativecommons.org/licenses/by-sa/4.0/"
                target="_blank"
                rel="noopener"
              >
                CC 4.0 BY-SA
              </a>
              版权协议，转载请附上原文出处链接和本声明。未经作者授权，禁止转载
            </div>
            <div class="single-reward">
              <a-popover
                placement="bottom"
                :get-popup-container="
                  (triggerNode) => {
                    return triggerNode.parentNode;
                  }
                "
              >
                <template slot="content">
                  <div class="wrap">
                    <div class="left">
                      <img
                        class="wechat"
                        src="http://t14.baidu.com/it/u=3381022396,2841686915&fm=224&app=112&f=JPEG?w=500&h=500"
                      >
                      <p>微信</p>
                    </div>
                    <div class="right">
                      <img
                        class="zhifubao"
                        src="http://t14.baidu.com/it/u=3381022396,2841686915&fm=224&app=112&f=JPEG?w=500&h=500"
                      >
                      <p>支付宝</p>
                    </div>
                  </div>
                </template>
                <span class="reward-open hvr-buzz-out"> 赏 </span>
              </a-popover>
            </div>
          </div>
        </div>
        <!-- 添加我 -->
        <div class="designer">
          <nuxt-link to="/about">
            <i>
              <img
                src="https://img0.baidu.com/it/u=661161858,172661768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              >
            </i>
            <p>king</p>
            <span>如果缘分安排我们相遇，请不要让它擦肩而过。扫一扫二维码，加我为好友吧！</span>
          </nuxt-link>
        </div>
        <!-- 上一篇 下一篇 -->
        <div class="pagination-post">
          <div class="neighbour">
            <div class="item-article prev">
              <a
                href="/article/198"
                class="link"
                title="时间真的存在吗"
              ><div class="icon">
                 <i class="iconfont icon-prev" />
               </div>
                <div class="content">
                  <p class="title">时间真的存在吗</p>
                  <p class="description">显然，我也不知道</p>
                </div></a>
            </div>
            <div class="item-article next">
              <a
                href="/article/200"
                class="link"
                title="让戾气郁结成冰"
              ><div class="content">
                 <p class="title">让戾气郁结成冰</p>
                 <p class="description">让戾气郁结成冰</p>
               </div>
                <div class="icon">
                  <i class="iconfont icon-next" /></div></a>
            </div>
          </div>
        </div>
        <!-- 推荐 -->
        <div class="recommed-article-box">
          <div
            v-for="(item, index) in recommendArticles"
            :key="index"
            class="container"
          >
            <div class="card-media">
              <!-- media container -->
              <div class="card-media-object-container">
                <div
                  class="card-media-object"
                  :style="{ backgroundImage: 'url(' + item.cover + ')' }"
                />
                <span class="card-media-object-tag subtle">{{
                  item.title
                }}</span>
              </div>
              <!-- body container -->
              <div class="card-media-body">
                <div class="card-media-body-top">
                  <span class="subtle">{{ item.createTime }}</span>
                  <div class="card-media-body-top-icons u-float-right">
                    <svg
                      fill="#888888"
                      height="16"
                      viewBox="0 0 24 24"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M0 0h24v24H0z" fill="none" />
                      <path
                        d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
                      />
                    </svg>
                    <svg
                      fill="#888888"
                      height="16"
                      viewBox="0 0 24 24"
                      width="16"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
                      />
                      <path d="M0 0h24v24H0z" fill="none" />
                    </svg>
                  </div>
                </div>
                <span class="card-media-body-heading">{{ item.summary }}</span>
                <div class="card-media-body-supporting-bottom">
                  <span class="card-media-body-supporting-bottom-text subtle">
                    <a-icon type="user" />By:{{ item.user.userName }}
                  </span>
                  <span
                    class="card-media-body-supporting-bottom-text subtle u-float-right"
                  >
                    <a-icon type="eye" /> {{ item.viewCount }}
                  </span>
                </div>
                <div
                  class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal"
                >
                  <span class="card-media-body-supporting-bottom-text subtle">
                    {{ item.labels }}
                  </span>
                  <span>
                    <a
                      :href="`/article/${item.id}`"
                      class="card-media-body-supporting-bottom-text card-media-link u-float-right"
                    >阅读全文
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  评论-->
        <div class="comment-list-box">
          <section>
            <div class="coment-info-box">
              <div>
                <comment :comment="articleComment" :article-id="articleId" />
              </div>
            </div>
          </section>
        </div>
      </div>

      <!-- 右边区域 -->
      <div class="rightcolumn">
        <!-- 标签云 -->
        <div id="test" class="label-cloud-box">
          <h4>
            <i>
              <a-icon type="tags" />
            </i>
            <span>标签云</span>
          </h4>
          <word-cloud @func="getLabelName" />
        </div>
        <!-- 文章目录 -->
        <a-affix>
          <div class="catalog-list-box">
            <h4>
              <i>
                <a-icon type="tags" />
              </i>
              <span>文章目录</span>
            </h4>
            <div id="article-category-box" class="article-catalog-box" />
          </div>
        </a-affix>
        <!-- 相关文章 -->
        <div class="" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  getArticleById,
  getRecommendArticle,
  getArticleComment
} from '@/api/api'
import WordCloud from '~/components/WordCloud.vue'
import Catelog from '~/util/headerLineHandler'
// import hljs from 'highlight.js'
// import 'highlight.js/styles/magula.css'
import Comment from '~/components/Comment.vue'
export default {
  components: { WordCloud, Comment },
  async asyncData ({ params }) {
    const articleId = params.id + ''
    const articleDetailRes = await getArticleById(articleId)
    // 推荐
    const articleRecommendRes = await getRecommendArticle(articleId, 6)
    const articleComment = await getArticleComment(articleId)
    return {
      articDetail: articleDetailRes.data,
      recommendArticles: articleRecommendRes.data,
      articleComment: articleComment.data.list,
      articleId
    }
  },
  data () {
    return {
      wordNUm: '0', // 字数
      readTime: '', // 阅读时间
      isArticleProcessing: true, // 加载状态
      articleUrl: this.$route.path,
      likes: 0,
      dislikes: 0,
      userInfo: this.$store.state.userInfo,
      articleId: this.$route.articleId
    }
  },
  head () {
    return {
      title: 'King`s阅览室--' + this.articDetail.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'King`s 阅览室--' + this.articDetail.summary
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'King,博客,java,vue,nuxt,开发，博客系统，程序员，程序猿'
        }
      ]
    }
  },

  created () {
    this.getArticleInfo()
  },
  mounted () {
    // eslint-disable-next-line no-new
    new Catelog({
      contentEl: 'markdown-body-box',
      catalogEl: 'article-category-box',
      selector: ['h1', 'h2', 'h3']
    })
    const that = this
    const timer = setInterval(() => {
      that.isArticleProcessing = false
      clearInterval(timer)
    }, 1000)
    // hljs.initHighlightingOnLoad();
  },
  methods: {
    // 获取点击的标签名称
    getLabelName (value) {
      this.labelName = value
    },
    // 匹配出html标签之外的文字
    deleteHTMLTag (content) {
      return content
        .replace(/<\/?[^>]*>/g, '')
        .replace(/[|]*\n/, '')
        .replace(/&npsp;/gi, '')
    },
    getArticleInfo () {
      // 统计文章字数
      this.wordNum = this.deleteHTMLTag(this.articDetail.content).length
      // 计算阅读时间
      this.readTime = Math.round(this.wordNum / 400) + '分钟'
    }
  }
}
</script>
<style lang="less">
* {
  padding: 0px;
}
.article-detail-box {
  max-width: 1245px;
  margin: 10px auto 10px;
  /* 创建两列 */
  /* Left column */
  .leftcolumn {
    float: left;
    width: 75%;
    height: 100%;
    border-radius: 5px;
    .article-header-box {
      border-radius: 5px;
      background: #fff;
      float: none;
      padding: 10px;
      .article-title {
        text-align: center;
        font-size: 25px;
        word-wrap: break-word;
        font-weight: 600;
        margin: 0;
        word-break: break-all;
      }
      .article-cover {
        padding: 10px 10px 20px;
        img {
          width:100%;
          object-fit: cover;
          height: 240px;
          border-radius: 10px;
          border: 5px solid #e8e8e8;
        }
      }
      // 原创
      .info-box {
        height: 40px;
        background: #f7f7fc;
        border-radius: 4px;

        .bar-content {
          text-align: center;
          line-height: 40px;
          .original {
            font-size: 16px;
            vertical-align: middle;
            opacity: 0.6;
            color: rgb(150, 106, 190);
          }
          > span {
            display: inline-block;
            margin-left: 12px;
            color: rgba(0, 0, 0, 0.38);
            &.light {
              color: rgba(47, 84, 235, 0.6);
            }
            i {
              margin-right: 3px;
              font-size: 12px;
            }
          }
        }

      }
      .slide-box {
        width: 100%;
        margin-top: 10px 20px 10px;
        padding: 4px 0;
        overflow: hidden;
        .tags-box {
          .tags-item-box {
            font-size: 13px;
            line-height: 18px;
            margin-top: 8px;
            margin-left: 20px;
            margin-right: 8px;
            .label {
              display: inline-block;
              color: #555666;
            }
            .tag-link {
              margin-right: 8px;
              padding: 3px 6px;
              font-size: 12px;
              background-color: #9da0c9;
              color: #fff;
              border-radius: 4px;
              &:hover {
                color: pink;
                border-color: pink;
              }
            }
          }
        }
        // 复制申明
        .article-copyright {
          .copyRight {
            margin-left: 20px;
            padding: 8px 8px 8px 0;
            color: #6f6f82;
            font-size: 13px;
            line-height: 20px;
            letter-spacing: 1px;
            a {
              padding: 20px 8px 8px 0;
              color: #4a88c4;
              &:hover {
                color: pink;
              }
            }
          }
        }
      }
    }
    // 文章详情
    .article-info-body {
      border-radius: 5px;
      .loadding-box {
        width: 100%;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        > .ant-skeleton {
          padding: 10px;
        }
      }
      .mavonEditor {
        // padding: 20px 20px;
        background: #fff;
        overflow: hidden;
        width: 100%;
        .cata-log-box {
          margin: 0px 20px;
          .content-category-title {
            font-size: 20px;
            font-weight: 600;
          }
          .cl-wrapper ul {
            margin-left: 20px;
            list-style: none;
            line-height: 30px;
            li {
              cursor: pointer;
              span:hover {
                color: #2196f3;
              }
            }
          }
        }
        .markdown-body-box {
          font-size: 15px;
          margin: 20px 20px;
          a {
            // color: #42b983;
            font-weight: 600;
            padding: 0 2px;
            text-decoration: none;
          }
          img {
            max-width: 100%;
            max-height: 500px;
            display: block;
            margin: 0 auto;
            cursor: zoom-in;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            position: relative;
            margin-top: 1rem;
            margin-bottom: 1rem;
            font-weight: bold;
            line-height: 1.4;
            cursor: text;
            color: #535353;
          }

          h1 {
            padding-bottom: 0.4rem;
            font-size: 1.7rem;
            line-height: 1.3;
          }
          h2 {
            font-size: 1.55rem;
            line-height: 1.225;
            margin: 35px 0 15px;
            padding-bottom: 0.5em;
            border-bottom: 1px solid #ddd;
          }

          h3 {
            font-size: 1.4rem;
            line-height: 1.43;
            margin: 20px 0 7px;
          }

          h4 {
            font-size: 1.2rem;
          }

          h5 {
            font-size: 1.15rem;
          }

          h6 {
            font-size: 1rem;
            color: #777;
          }

          p {
            // margin-bottom: 16px;
            font-size: 16px;
            text-indent: 32px;

            line-height: 2rem;
            // word-spacing: 0.5rem;
            text-indent: 2em;
            color: var(--text-color);
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
          }
          strong {
            padding: 0 1px;
          }
          li {
            font-size: 16px;
            line-height: 2rem;
          }

          li > ol,
          li > ul {
            margin: 0 0;
          }

          ul,
          ol {
            padding-left: 30px;
          }

          hr {
            height: 1px;
            padding: 0;
            margin: 16px 0;
            background-color: #e7e7e7;
            border: 0 none;
            // overflow: hidden;
            box-sizing: content-box;
          }

          blockquote {
            width: 100%;
            background-color: #eeeeee;
            border-left: 4px solid #d5d4d2;
            // border-radius: 0.3rem;
            padding: 5px;
            p {
              text-indent: 0;
            }
          }

          table {
            width: 100%;
            padding: 0;
            word-break: initial;
          }

          table tr {
            border-top: 1px solid #dfe2e5;
            margin: 0;
            padding: 0;
          }

          table tr:nth-child(2n),
          thead {
            background-color: #fafafa;
          }

          table tr th {
            font-weight: bold;
            border: 1px solid #dfe2e5;
            border-bottom: 0;
            text-align: left;
            margin: 0;
            padding: 6px 13px;
          }

          table tr td {
            border: 1px solid #dfe2e5;
            text-align: left;
            margin: 0;
            padding: 6px 13px;
          }

          table tr th:first-child,
          table tr td:first-child {
            margin-top: 0;
          }

          table tr th:last-child,
          table tr td:last-child {
            margin-bottom: 0;
          }

          pre {
            box-sizing: border-box;
            overflow: auto;
            font-family: "Times New Roman", Times, serif;
            font-size: 14px;
            padding: 4.5px;
            margin-top: 0px;
            margin-bottom: 10px;
            line-height: 1.42857;
            color: #757575;
            word-break: break-all;
            word-wrap: break-word;
            border-radius: 4px;
            background: #23272E;
            > p {
              text-indent: 0;

              margin: 0;
            }
          }
        }
        .tags-item-box {
          font-size: 13px;
          line-height: 18px;
          margin-top: 8px;
          margin-left: 20px;
          margin-right: 8px;
          margin-bottom: 20px;
          .label {
            display: inline-block;
            color: #555666;
          }
          .tag-link {
            margin-right: 8px;
            padding: 3px 6px;
            font-size: 12px;
            background-color: #9da0c9;
            color: #fff;
            border-radius: 4px;
            &:hover {
              color: pink;
              border-color: pink;
            }
          }
        }
      }
      // 转载赞赏
      .play-tour-box {
        border-radius: 5px;
        margin: 5px 0px;
        text-align: center;
        background: #fff;
        height: 110px;
      }
      .right-show-text {
        font-family: webfont-normal, DINRegular;
        text-decoration: none;
        box-sizing: border-box;
        margin: 0;
        padding: 15px;
        color: #909090;
        text-align: center;
        border-radius: 4px;
        .article-user-info {
          font-size: 15px;
          color: #3366cc;
          width: 600px;
        }
        .icon-warning-outline {
          color: #cc3333;
        }
      }
      .single-reward {
        position: relative;
        width: 100%;
        margin: 0px auto;
        text-align: center;
        z-index: 999;
        .wrap {
          display: flex;
        }
        .left,
        .right {
          p {
            width: 100%;
            margin: 0px;
            text-align: center;
          }
        }
        .ant-popover-inner-content {
          padding: 5px !important;
          img {
            width: 90px;
            height: 90px;
            margin: 5px;
            &.wechat {
              border: 2px #31c248 dashed;
            }
            &.zhifubao {
              border: 2px #5b99f7 dashed;
            }
          }
        }

        .reward-open {
          position: relative;
          width: 40px;
          height: 40px;
          font-size: 18px;
          padding: 7px;
          color: #ffffff;
          text-align: center;
          display: inline-block;
          border-radius: 100%;
          background: #ec7259;
          cursor: pointer;
        }
      }
    }
    // 添加我
    .designer {
      border-radius: 5px;
      margin: 10px 0;
      padding: 20px;
      background: #fff url("~/assets/images/group_qq.png") no-repeat right 5px
        bottom 5px;
      background-size: 80px;
      a {
        display: block;
        overflow: hidden;
      }
      i {
        display: block;
        width: 50px;
        height: 50px;
        background: #d6d4d5;
        border-radius: 100%;
        overflow: hidden;
        float: left;
        margin-right: 10px;
        img {
          width: 46px;
          margin: 5px auto 0;
          display: block;
        }
      }
      p {
        color: #2c3e50;
        padding: 4px 0 0 0;
      }
      span {
        color: #888;
        font-size: 13px;
      }
    }
    // 上一篇下一篇
    .pagination-post {
      margin: 10px 0px;
      height: 63px;
      // background: #fff;
      border-radius: 5px;
      .neighbour {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        overflow: hidden;
        .item-article {
          display: block;
          position: relative;
          //  background-color: #fff;
          transition: background-color 0.25s;
          border-radius: 4px;
          overflow: hidden;
          .link {
            display: flex;
            width: 100%;
            height: 100%;
            color: rgba(0, 0, 0, 0.74);
            .icon {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 3rem;
              height: 100%;
              color: rgba(0, 0, 0, 0.74);
              background-color: #fff;
              transition: all 0.1s;
              .icon-prev {
                transform: rotate(135deg);
                -webkit-transform: rotate(135deg);
              }
              .icon-next {
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
              }
              .iconfont {
                border: solid black;
                border-width: 0 2px 2px 0;
                display: inline-block;
                padding: 3px;
              }
            }
            .content {
              background: rgba(255, 255, 255, 0.6);
              width: calc(100% - 3rem);
              padding: 0.618rem 1rem;
              .title {
                font-size: 13.58px;
                margin-top: 0;
                margin-bottom: 0.309rem;
                font-weight: 700;
                color: rgba(0, 0, 0, 0.68);
              }
              .description {
                margin-bottom: 0;
                font-size: 12.432px;
                color: rgba(0, 0, 0, 0.38);
              }
              &:hover {
                background: #fff;
              }
            }
          }
        }
      }
    }
    //推荐文章
    .recommed-article-box {
      border-radius: 5px;
      margin-top: 10px;

      .recommend-title {
        -webkit-text-size-adjust: 100%;
        font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu,
          Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial;
        text-rendering: optimizeLegibility;
        line-height: 20px;
        word-break: break-word;
        padding: 15px 15px 0px;
        position: relative;
        font-weight: 500;
        font-size: 16px;
        width: 100%;
        display: flex;
        align-items: center;
      }
      .container {
        margin: 0px auto 0;
      }

      .u-float-right {
        float: right;
      }

      .u-flex-center {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .subtle {
        color: #888;
        font-size: 12px;
      }

      .card-media {
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        height: 125px;
        margin-bottom: 10px;
        transition: all 300ms ease-out;
        width: 100%;
      }

      .card-media:hover {
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
      }

      .card-media-object-container {
        background: none;
        float: left;
        height: 100%;
        width: 35%;
        position: relative;
      }

      .card-media-object {
        background-position: center center;
        background-size: cover;
        height: 100%;
      }

      .card-media-object:after {
        content: " ";
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 300ms ease-out;
        z-index: 10;
      }

      .card-media:hover .card-media-object:after {
        background: -moz-linear-gradient(
          top,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 52%,
          rgba(0, 0, 0, 0.4) 100%
        );
        background: -webkit-linear-gradient(
          top,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 52%,
          rgba(0, 0, 0, 0.4) 100%
        );
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 52%,
          rgba(0, 0, 0, 0.4) 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
        opacity: 1;
      }

      .card-media-object-tag {
        color: #fff;
        text-align: center;
        background-color: #000000; /* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
        background-color: rgba(
          0,
          0,
          0,
          0.2
        ); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
        // border-radius: 2px;
        padding: 2px 7px;
        position: absolute;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        top: 103px;
      }

      .card-media-object-social-list {
        bottom: 4px;
        left: 10px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 20;
      }

      .card-media-object-social-list li {
        border-radius: 50%;
        display: inline-block;
        height: 30px;
        margin-right: 6px;
        opacity: 0;
        overflow: hidden;
        transform: translateY(5px);
        transition: all 300ms ease-out;
        width: 30px;
      }

      .card-media:hover .card-media-object-social-list li {
        opacity: 1;
        transform: translateY(0);
      }

      .card-media-object-social-list li:nth-child(1) {
        transition-delay: 0;
      }
      .card-media-object-social-list li:nth-child(2) {
        transition-delay: 75ms;
      }
      .card-media-object-social-list li:nth-child(3) {
        transition-delay: 150ms;
      }

      .card-media-object-social-list-item-additional {
        border: 1px solid #fff;
        color: #fff;
        font-size: 12px;
        padding-top: 7px;
        text-align: center;
      }

      .card-media-body {
        background-color: #fff;
        float: left;
        height: 100%;
        padding: 12px 15px;
        position: relative;
        width: 65%;
      }

      .card-media-body-top {
        display: block;
      }

      .card-media-body-top-icons {
        margin-top: -2px;
        opacity: 0;
        transition: all 300ms ease-out;
        transform: translateY(-5px);
      }

      .card-media:hover .card-media-body-top-icons {
        opacity: 1;
        transform: translateY(0);
      }

      .card-media-body-top-icons > svg {
        cursor: pointer;
        margin-left: 10px;
        transition: all 300ms ease-out;
      }

      .card-media-body-top-icons > svg:hover {
        fill: #444;
      }

      .card-media-body-heading {
        display: -webkit-box;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .card-media-body-supporting-bottom {
        position: absolute;
        bottom: 10px;
        left: 0;
        opacity: 1;
        padding: 0 15px;
        transition: all 300ms ease-out;
        width: 100%;
      }

      .card-media:hover .card-media-body-supporting-bottom {
        opacity: 0;
        transform: translateY(-8px);
      }

      .card-media-body-supporting-bottom-text {
        display: inline-block;
      }

      .card-media-body-supporting-bottom-reveal {
        opacity: 0;
        transform: translateY(8px);
        transition: all 300ms ease-out;
      }

      .card-media:hover .card-media-body-supporting-bottom-reveal {
        opacity: 1;
        transform: translateY(0);
      }

      .card-media-link {
        // color: #41c1f2;
        text-decoration: none;
      }
    }

    // // 评论
    // .article-comment-box {
    //   width: 100%;
    //   // height: 200px;
    //   margin-top: 10px;
    //   background: #fff;
    //   .comment-textarea {
    //     padding: 0px 20px;
    //     width: 920px;
    //   }
    // }
    .comment-list-box {
      border-radius: 5px;
      // margin-top: 10px;
      // background: #fff;
      // .coment-info-box {
      //     background: #0288d1;
      // }
    }
  }

  /* 右侧栏 */
  .rightcolumn {
    margin-left: 10px;
    float: left;
    width: 24%;
    // 标签云
    .label-cloud-box {
      background: #fff;
      border-radius: 5px;
      height: 300px;
      box-shadow: 0 2px 4px 0 #bdbdbd;
      padding: 16px 0;
      h4 {
        font-weight: normal;
        padding: 0 16px 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #f3f3f3;

        i {
          vertical-align: middle;
          margin-right: 6px;
          color: #3f51b5;
          font-size: 16px;
          line-height: 20px;
        }

        span {
          font-weight: bold;
          font-size: 14px;
          line-height: 20px;
          color: #333;
        }
      }
    }
    // 文章目录
    .catalog-list-box {
      border-radius: 5px;
      margin-top: 10px;
      background: #fff;
      // height: 500px;
      box-shadow: 0 2px 4px 0 #bdbdbd;
      padding: 16px 0;
      h4 {
        font-weight: normal;
        padding: 0 16px 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #f3f3f3;

        i {
          vertical-align: middle;
          margin-right: 6px;
          color: #3f51b5;
          font-size: 16px;
          line-height: 20px;
        }

        span {
          font-weight: bold;
          font-size: 14px;
          line-height: 20px;
          color: #333;
        }
      }
      // 文章目录
      .article-catalog-box {
        max-height: 300px;
        overflow: hidden;
        .cl-link-active {
          color: #0288d1 !important;
        }
        .cl-wrapper ul {
          margin-left: 10px;
          list-style: square;
          line-height: 30px;
          li {
            color: #757575;
            margin-left: 20px;
            cursor: pointer;
            span {
              line-height: 30px;
              font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
              margin-top: 4px;
              margin-bottom: 4px;
              font-weight: 700;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              &:hover {
                background: #f2f6fc;
              }
            }
          }
        }
      }
    }
  }

  /* 列后面清除浮动 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
}
// 网格背景
//  background: linear-gradient(
//                             to right,
//                             #ccc 1px,
//                             transparent 1px
//                         ),
//                         linear-gradient(to bottom, #ccc 1px, transparent 1px);
//                     background-repeat: repeat; /* 默认为 repeat */
//                     background-size: 10px 10px;
</style>
